<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back" @click="goBack">
        <text class="iconfont icon-back"></text>
      </view>
<!--      <view class="title">我的组员</view>-->
      <view class="right-icons">
        <text class="iconfont icon-more" @click="showMore"></text>
        <text class="iconfont icon-share" @click="share"></text>
      </view>
    </view>

    <!-- 选项卡 -->
    <view class="tab-bar">
      <view
          class="tab-item"
          :class="{ active: currentTab === 0 }"
          @click="switchTab(0)"
      >
        招宣组1
      </view>
      <view
          class="tab-item"
          :class="{ active: currentTab === 1 }"
          @click="switchTab(1)"
      >
        招宣组2
      </view>
    </view>

    <!-- 活动基本信息 -->
    <view class="activity-info">
      <view class="info-item">
        <text class="label">活动名称</text>
        <text class="value">2012届毕业生母校游</text>
      </view>
      <view class="info-item">
        <text class="label">组长</text>
        <text class="value">张明</text>
      </view>
      <view class="info-item">
        <text class="label">副组长</text>
        <text class="value">王小蓝</text>
      </view>
      <view class="info-item">
        <text class="label">联络员</text>
        <text class="value">张明</text>
      </view>
    </view>

    <!-- 活动成员列表 -->
    <view class="member-list">
      <view class="member-avatars">
        <image
            v-for="(avatar, index) in memberAvatars"
            :key="index"
            :src="avatar"
            class="avatar"
        />
      </view>
      <view class="member-table">
        <view class="table-header">
          <text class="header-item">姓名</text>
          <text class="header-item">所在单位</text>
          <text class="header-item">职务</text>
          <text class="header-item">联系电话</text>
        </view>
        <view
            class="table-row"
            v-for="(member, index) in members"
            :key="index"
        >
          <text class="row-item">{{ member.name }}</text>
          <text class="row-item">{{ member.unit }}</text>
          <text class="row-item">{{ member.position }}</text>
          <text class="row-item">{{ member.phone }}</text>
        </view>
      </view>
    </view>

    <!-- 最近活动总结 -->
    <view class="activity-summary">
      <view class="summary-title">最近的一条活动总结</view>
      <view class="summary-content">
        <text class="summary-title-text">10001关联活动标题</text>
        <text class="summary-desc">
          学学院团委学生会走进红河州戒毒所，举行了爱心帮教动。此次，在数学学院志愿者与强制戒毒人员的联欢就是他们开展的互动活动之一“正能量传递”
        </text>
        <view class="summary-footer">
          <image src="/static/avatar.jpg" class="summary-avatar" />
          <view class="summary-info">
            <text class="summary-time">2023/03/23 10:00:00</text>
            <text class="summary-author">李明慧</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出本组按钮 -->
    <view class="exit-btn" @click="exitGroup">退出本组</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的选项卡索引
      memberAvatars: [
        // 成员头像地址
        "/static/avatar1.jpg",
        "/static/avatar2.jpg",
        "/static/avatar3.jpg",
        "/static/avatar4.jpg",
      ],
      members: [
        // 成员数据
        {
          name: "张晓晶",
          unit: "武汉一中",
          position: "教师",
          phone: "16788999008",
        },
        {
          name: "张晓晶",
          unit: "武汉一中",
          position: "教师",
          phone: "16788999008",
        },
        {
          name: "张晓晶",
          unit: "武汉一中",
          position: "教师",
          phone: "16788999008",
        },
      ],
    };
  },
  methods: {
    // 切换选项卡
    switchTab(tabIndex) {
      this.currentTab = tabIndex;
    },
    // 返回
    goBack() {
      uni.navigateBack();
    },
    // 显示更多操作
    showMore() {
      uni.showToast({
        title: "显示更多",
        icon: "none",
      });
    },
    // 分享
    share() {
      uni.showToast({
        title: "分享",
        icon: "none",
      });
    },
    // 退出本组
    exitGroup() {
      uni.showModal({
        title: "提示",
        content: "确定要退出本组吗？",
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "退出成功",
              icon: "success",
            });
            // 这里可以添加退出本组的逻辑，比如跳转到其他页面
            // uni.navigateTo({ url: '/pages/other/other' });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 0 20rpx;
  background-color: #F1F5FF;
  height: 100%;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8rpx;
  border-bottom: 1rpx solid #eee;
}
.back {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}
.right-icons {
  display: flex;
  align-items: center;
}
.iconfont {
  font-size: 32rpx;
  margin-left: 30rpx;
}

/* 选项卡 */
.tab-bar {
  display: flex;
  height: 88rpx;
  margin-top: 20rpx;
}
.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  border-bottom: 4rpx solid transparent;
}
.tab-item.active {
  color: #007aff;
  border-bottom-color: #007aff;
}

/* 活动基本信息 */
.activity-info {
  margin-top: 30rpx;
}
.info-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.label {
  width: 150rpx;
  color: #666;
}
.value {
  flex: 1;
}

/* 活动成员列表 */
.member-list {
  margin-top: 30rpx;
}
.member-avatars {
  display: flex;
  flex-wrap: wrap;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}
.member-table {
  margin-top: 20rpx;
}
.table-header {
  display: flex;
  background-color: #f0f0f0;
  padding: 10rpx 0;
}
.header-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
}
.table-row {
  display: flex;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #eee;
}
.row-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
}

/* 活动总结 */
.activity-summary {
  margin-top: 30rpx;
}
.summary-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.summary-content {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}
.summary-title-text {
  font-size: 30rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}
.summary-desc {
  font-size: 28rpx;
  line-height: 1.5;
  margin-bottom: 20rpx;
  display: block;
}
.summary-footer {
  display: flex;
  align-items: center;
}
.summary-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.summary-info {
  flex: 1;
}
.summary-time {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-bottom: 5rpx;
}
.summary-author {
  font-size: 28rpx;
}

/* 退出按钮 */
.exit-btn {
  margin: 40rpx auto;
  width: 600rpx;
  height: 88rpx;
  background-color: #007aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  border-radius: 10rpx;
}
</style>